<template>
  <div id="app">
    <el-container style="display: flex; flex-direction: column; height: 98vh">
      <!-- 头部 -->
      <el-header>
        <div class="image-container">
          <img src="../assets/images/huarenlogo.png" alt="华人logo" class="responsive-image" />
        </div>
        <div style="display: flex; flex-direction: row">
          <div class="nav-item" @click="homeRouteFn">Home</div>
          <div class="nav-item">Into huaren</div>
          <div class="nav-item">News center</div>
          <div class="nav-item">Contact us</div>
        </div>
      </el-header>

      <el-main>
        <div style="width: auto; height: 200px; border: 1px solid #ebeef5;">
          <div>
            <h3 style="text-align: left;padding-left: 10px">
              Cuslomer Number:ys005 Goods Status
            </h3>
          </div>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-col :span="6">
                <div class="">Departure Station:</div>
              </el-col>
              <el-col :span="6">
                <div class="">Arrival Station:</div>
              </el-col>
              <el-col :span="6">
                <div class="">Transportation Method: </div>
              </el-col>
              <el-col :span="6">
                <div class="">Packing Method</div>
              </el-col>
            </el-col>
            <el-col :span="24" style="margin-top: 4px;font-weight: 600;">
              <el-col :span="6">
                <div class="">Beijing</div>
              </el-col>
              <el-col :span="6">
                <div class="">New York</div>
              </el-col>
              <el-col :span="6">
                <div class="">Shipping</div>
              </el-col>
              <el-col :span="6">
                <div class="">thermobox 2~25℃</div>
              </el-col>
            </el-col>

            <el-col :span="24" style="margin-top: 10px;">
              <el-col :span="12">
                <div class="">Consigncc Information:</div>
              </el-col>
              <el-col :span="12">
                <div class="">Order Reccipt Date: </div>
              </el-col>
            </el-col>
            <el-col :span="24" style="margin-top: 4px;font-weight: 600;">
              <el-col :span="12">
                <div class="">huaren.scm huaren.scm_Beijing Haidian District Zhongguancun Streets No.1 </div>
              </el-col>
              <el-col :span="12">
                <div class="">2024-05-23</div>
              </el-col>
            </el-col>

            <el-col :span="24" style="margin-top: 10px;">
              <el-col :span="12">
                <div class="">Estimated Pickup Time</div>
              </el-col>
              <el-col :span="12">
                <div class="">Estimated Arrival Time</div>
              </el-col>
            </el-col>
            <el-col :span="24" style="margin-top: 4px;font-weight: 600;">
              <el-col :span="12">
                <div class="">2024-05-20</div>
              </el-col>
              <el-col :span="12">
                <div class="">2024-05-20</div>
              </el-col>
            </el-col>
          </el-row>

        </div>

        <div style="display: flex; justify-content: space-between">
          <div style="height: 400px; width: 40%;margin-top: 16px;display: flex">
            <div style="height: 400px; width: 6%;display: grid; place-items: center">
              <div style="height: 240px">
                <el-steps direction="vertical" :active="1" finish-status="finish">
                  <el-step title=""></el-step>
                  <el-step title=""></el-step>
                  <el-step title="" description=""></el-step>
                </el-steps>
              </div>
            </div>


            <div style="height: 400px;width: 94%; display: grid;place-items: center">
              <div style="width: 90%; height: 100px; background-color: white; border-radius: 5px;box-shadow: 2px;">
                <el-row :gutter="20" style="padding-left: 12px;padding-right:12px">
                  <el-col :span="24">
                    <h2>Shanghai</h2>
                  </el-col>
                  <el-col :span="24">
                    <div>Shanghai</div>
                  </el-col>
                </el-row>
              </div>
              <div style="width: 90%;height: 100px;background-color: white;border-radius: 5px;box-shadow: 2px;">
                <el-row :gutter="20" style="padding-left: 12px;padding-right:12px">
                  <el-col :span="24" style="display: flex;justify-content: space-between;">
                    <h2>Shanghai - Odasse</h2>
                    <h2>40days</h2>
                  </el-col>
                  <el-col :span="24">
                    <div>30 Mar 2019 - Transit</div>
                  </el-col>
                </el-row>
              </div>
              <div style="width: 90%;height: 100px;background-color: white;border-radius: 5px;box-shadow: 2px;">
                <el-row :gutter="20" style="padding-left: 12px;padding-right:12px">
                  <el-col :span="24">
                    <h2>Odasse</h2>
                  </el-col>
                  <el-col :span="24">
                    <div>30 Mar 2019 - Transit</div>
                  </el-col>
                </el-row>
              </div>
            </div>
          </div>
          <div style="height: 400px; width: 60%;position: relative;overflow: hidden;margin-top: 16px;">
            <img src="../assets/images/map.png" alt="地图" class="responsive-image" />
          </div>
        </div>
      </el-main>

      <!-- footer内容 -->
      <el-footer style="display: grid; place-items: center">
        <div style="margin-left: 60px;margin-right: 60px">
          <el-row :gutter="20">
            <el-col :span="24" style="margin-bottom: 16px;">
              <el-col :span="18">
                <i class="iconfont">&#xe61a;</i>
                <!-- <span class="icon iconfont">&#xe61a;</span> -->
                <div style="margin-left: 8px;">
                  <span>Address:</span>&nbsp;&nbsp;<span>No.22 Jinghai 2nd Road, Beijing Economic and Technological
                    Development Zone,
                    Beijing, China</span>
                </div>
              </el-col>
              <el-col :span="6">
                <i class="iconfont">&#xe61e;</i>
                <div style="margin-left: 8px;">
                  <span>Postcode:</span>&nbsp;&nbsp;
                  <span>100023</span>
                </div>
              </el-col>
            </el-col>
            <el-col :span="24" style="margin-bottom: 16px;">
              <el-col :span="24">
                <i class="iconfont">&#xe61c;</i>
                <div style="margin-left: 8px;">
                  Marketing DIVISION：010-87927585， Ministry of Personnel：（+8610）67889118
                </div>
              </el-col>
            </el-col>

            <el-col :span="24" style="margin-bottom: 16px;">
              <el-col :span="24">
                <div>
                  Beijing Shengshi Chinese Supply Chain Management Co., LTD. All rights reserved.
                </div>
              </el-col>
            </el-col>
            <el-col :span="24" style="font-size: 14px;color: #aaaaaa;">
              <el-col :span="4">
                <i class="iconfont">&#xe61f;</i>
                <div style="margin-left: 8px;">
                  Beijing ICP for 11045864-3
                </div>
              </el-col>
              <el-col :span="7">
                <i class="iconfont">&#xe620;</i>
                <div style="margin-left: 8px;">
                  Beijing Public network security 11011502004054
                </div>
              </el-col>
              <el-col :span="13"></el-col>
            </el-col>
          </el-row>
        </div>
      </el-footer>
    </el-container>
  </div>
</template>
<script>

export default {
  name: "AboutView",
  components: {
  },
  data() {
    return {
      searchModel: '',
      activeName: null,
      tabList: [
        { index: 1, name: "Home", label: "Home" },
        { index: 2, name: "Into huaren", label: "Into huaren" },
        { index: 3, name: "News center", label: "News center" },
        { index: 4, name: "Contact us", label: "Contact us" },
      ]
    }
  },
  computed: {

  },
  created() { },
  mounted() { },
  methods: {
    SearchFn() { },
    changeBillFn() { },
    handleClick() { },
    homeRouteFn() {
      this.$router.push({ path: '/' })
    }

  }

};
</script>

<style lang="scss" scoped>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;

  .el-header {
    background-color: #fff;
    color: #333;
    text-align: center;
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .el-main {
    background-color: #e9eef3;
    color: #333;
    text-align: center;
    height: 540px;
  }

  .el-footer {
    background-color: #5f6366;
    color: #f8f1f1;
    text-align: center;
    height: calc(98vh - 600px);
    flex-grow: 1;
    font-family: emoji;
    font-size: 18px;
  }

  .nav-item {
    margin-right: 64px;
    color: #000;
    transition: color 0.3s ease;
    /* 可选，添加过渡效果 */
  }

  .nav-item:hover {
    /* 悬停时的颜色 */
    color: #1a5eff;
    cursor: pointer;
  }

  .image-container {
    width: 240px;
    /* 你可以设置你想要的宽度 */
    // height: 200px;
    /* 你可以设置你想要的高度，但请注意这可能会导致图片裁剪 */
    overflow: hidden;
    /* 隐藏超出容器的部分 */
    position: relative;
    /* 如果需要定位图片可以添加这个属性 */
  }

  .responsive-image {
    width: 100%;
    /* 宽度100%以填满容器 */
    height: auto;
    /* 高度自动以保持图片的原始宽高比 */
    display: block;
    /* 移除图片底部的默认间隙 */
  }
}

.el-row {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.el-col {
  border-radius: 4px;
  display: flex;
  justify-content: flex-start;
  padding-left: 40px;
  line-height: 16px;
}


::v-deep .el-input--suffix,
::v-deep .el-input__inner {
  width: 860px;
  height: 80px;
  font-size: 20px;
}

::v-deep .el-button--primary {
  background-color: #1a5eff;
}

.waybill-inquiry {
  cursor: pointer;
}

.waybill-inquiry:hover {
  color: black;
}

::v-deep .el-input__suffix {
  top: 5px;
}

::v-deep .el-icon-search {
  margin-right: 20px;
}

::v-deep .el-icon-search:before {
  font-size: 24px;
}
</style>
